<template>
  <el-descriptions
    class="margin-top"
    :column="column_count"
  >
    <el-descriptions-item v-for="(item_data, index) in service_list" align="center">
      <ServiceCard :idx="index" :name="item_data.name" :description="item_data.description"></ServiceCard>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">

import ServiceCard from './ServiceCard.vue'

interface service_type {
  name: string
  description: string
}

const props = defineProps({
  service_list: {
    type: Array<service_type>,
    default: [{name: 'service name', description: 'service description'}],
    required: true
  },
  column_count: {
    type: Number,
    default: 4,
    required: false
  }
});

</script>
